<template>
  <div class="my_container">
    <!-- logo部分 -->
    <div class="logo">
      <div class="info">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-cf0de42c986093b0cd9289724038836e_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657335984&t=0fd2af0ab45278774726df515cd2bac6"
          alt=""
          srcset=""
          @click="clickLogo"
        />
        <span>{{ username || '小狸猫' }}</span>
      </div>
    </div>

    <!-- 信息部分 -->
    <div class="my_content">
      <div class="content">
        <div class="top_tips">
          <div
            v-for="(item, index) in tips"
            :key="index"
            @click="goToTips(item)"
          >
            <span>{{ item.count }}</span>
            <span>{{ item.name }}</span>
          </div>
        </div>

        <!-- 我的订单 -->
        <div class="myOrder">
          <div class="hd">我的订单</div>
          <div class="bd">
            <van-grid :border="false" :square="true">
              <van-grid-item
                v-for="item in order"
                :key="item.name"
                @click="clickOrder(item)"
              >
                <van-icon size="28px" color="#c00000" :name="item.icon" />
                <span>{{ item.name }}</span>
              </van-grid-item>
            </van-grid>
          </div>
        </div>

        <!-- 列表 -->
        <div class="list">
          <!-- 收货地址 -->
          <div class="address" @click="goToAddressList">
            <span>收货地址</span>
            <van-icon name="arrow" />
          </div>
          <!-- 客服服务 -->
          <div class="service" @click="goToService">
            <span>联系客服</span>
            <van-icon name="arrow" />
          </div>
          <!-- 退出登陆 -->
          <div class="outLogin" @click="outLogin">
            <span>退出登录</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Toast } from "vant";
import Cookies from 'js-cookie';
export default {
  name: "My",
  data() {
    return {
      username:'',
      tips: [
        {
          name: "收藏的店铺",
          count: 8,
        },
        {
          name: "收藏的商品",
          count: 14,
        },
        {
          name: "关注的商品",
          count: 18,
        },
        {
          name: "足迹",
          count: 84,
        },
      ],
      order: [
        {
          name: "代付款",
          icon: "balance-list-o",
        },
        {
          name: "待收货",
          icon: "logistics",
        },
        {
          name: "退款/退货",
          icon: "after-sale",
        },
        {
          name: "全部订单",
          icon: "notes-o",
        },
      ],
    };
  },
  methods: {
    firstCreate(){
      let username = JSON.parse(sessionStorage.getItem('username'))
      this.username = JSON.parse(Cookies.get(username)).username
    },
    clickLogo() {
      Toast("点击了头像");
    },
    goToTips(item) {
      Toast(`${item.name}`);
    },
    clickOrder(item) {
      Toast(`${item.name}`);
    },
    goToAddressList() {
      this.$router.push({
        path: "/addressList",
      });
    },
    goToService() {
      Toast("联系客服");
    },
    outLogin() {
      Dialog.confirm({
        // title: "标题",
        message: "确定退出登录吗？",
      })
        .then(() => {
          sessionStorage.removeItem('token')
          sessionStorage.removeItem('username')
          Toast.loading()
          setTimeout(() => {
            this.$router.push({
              path:'/home'
            })
            Toast.clear()
          } , 1000)
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created(){
    this.firstCreate()
  }
};
</script>

<style lang="less" scoped>
.my_container {
  .logo {
    height: 12.8906rem;
    background-color: #c00000;
    display: flex;
    justify-content: center;
    align-items: center;
    .info {
      display: flex;
      flex-direction: column;
      img {
        width: 4.6875rem;
        height: 4.6875rem;
        border-radius: 50px;
        margin-bottom: 5px;
      }
      span {
        color: #fff;
        font-weight: bold;
      }
    }
  }

  .my_content {
    background-color: #f4f4f4;
    position: relative;
    height: 20.5078rem;
    .content {
      width: 90vw;
      margin: 0 auto;
      position: absolute;
      top: -10px;
      left: 5vw;
      .top_tips {
        background-color: #fff;
        display: flex;
        border-radius: 5px 5px 0 0;
        padding: 5px;
        div {
          flex: 25%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 5px 2px;
          span {
            font-size: 12px;
            &:nth-of-type(1) {
              margin-bottom: 5px;
            }
          }
        }
      }

      .myOrder {
        width: 100%;
        margin-top: 10px;
        .hd {
          padding-left: 10px;
          height: 2.3437rem;
          line-height: 2.3437rem;
          font-size: 14px;
          text-align: left;
          background-color: #fff;
          border-bottom: 1px solid #f4f4f4;
        }
        .bd {
          /deep/ .van-grid-item {
            span {
              font-size: 12px;
              margin-top: 5px;
            }
          }
        }
      }

      .list {
        padding: 5px;
        margin-top: 10px;
        background-color: #fff;
        .address,
        .service,
        .outLogin {
          padding: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          border-bottom: 1px solid #f4f4f4;
        }
        .outLogin {
          border-bottom: none;
        }
      }
    }
  }
}
</style>